XMLHttpRequest (XHR) হলো একটি JavaScript API, যা ওয়েব ব্রাউজারের মাধ্যমে সেগুলোকে সার্ভারের সাথে asynchronous (অসিঙ্ক্রোনাস) ভাবে যোগাযোগ করতে সক্ষম করে। এটি একে অপরের সাথে যোগাযোগ না করেই ক্লায়েন্ট-সাইড এবং সার্ভার-সাইডের মধ্যে ডেটা এক্সচেঞ্জের প্রক্রিয়া সহজতর করে। এর মাধ্যমে কোনো পেজ রিফ্রেশ না করে ওয়েব পেজে ডেটা আপডেট করা যায়। সাধারণত AJAX (Asynchronous JavaScript and XML) প্রক্রিয়ায় XMLHttpRequest ব্যবহৃত হয়।
XMLHttpRequest ব্যবহার করার সুবিধা
- অসিঙ্ক্রোনাস ডেটা লোডিং: সার্ভার থেকে ডেটা নিতে হলে পেজ রিফ্রেশ করার প্রয়োজন হয় না।
- পেজের পারফরম্যান্স উন্নত করা: ওয়েব পেজের কিছু অংশ আপডেট করা সম্ভব, পুরো পেজ পুনরায় লোড করার প্রয়োজন হয় না।
- ইউজার ইন্টারফেসের উন্নয়ন: আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক ওয়েব পেজ তৈরি করা সম্ভব।
XMLHttpRequest ব্যবহার করে ডেটা ফেচিং প্রক্রিয়া
XMLHttpRequest ব্যবহার করে জেএসপি পেজে ডেটা asynchronously ফেচ করার জন্য কিছু স্টেপ অনুসরণ করতে হয়:
- JavaScript ফাংশন তৈরি যা XMLHttpRequest অবজেক্ট তৈরি করবে।
- JSP পেজ তৈরি যা HTTP রিকোয়েস্ট গ্রহণ করবে এবং ডেটা প্রেরণ করবে।
- JavaScript এর মাধ্যমে XMLHttpRequest কলে সার্ভার থেকে ডেটা নেওয়া।
JavaScript দিয়ে XMLHttpRequest কনফিগার করা
XMLHttpRequest অবজেক্ট দিয়ে সার্ভারের সাথে যোগাযোগ শুরু করার জন্য JavaScript ফাংশন তৈরি করতে হবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে XMLHttpRequest ব্যবহার করে ডেটা asynchronously ফেচ করা হচ্ছে।
উদাহরণ: JavaScript (AJAX) দিয়ে ডেটা ফেচিং
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি
xhr.open('GET', 'data.jsp', true); // GET রিকোয়েস্ট সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
</script>
</head>
<body>
<button onclick="fetchData()">ডেটা লোড করুন</button>
<div id="result"></div>
</body>
</html>
এখানে, fetchData() ফাংশনটি একটি XMLHttpRequest অবজেক্ট তৈরি করে, সেটিকে GET রিকোয়েস্টে কনফিগার করে এবং data.jsp থেকে ডেটা asynchronously ফেচ করে। যখন সার্ভার থেকে রেসপন্স আসে, তখন responseText প্রপার্টি দিয়ে ডেটা পেজে প্রদর্শন করা হয়।
JSP পেজে সার্ভার সাইড লজিক (data.jsp)
এখন, data.jsp পৃষ্ঠাটি সার্ভার সাইড থেকে ডেটা ফেরত পাঠানোর জন্য তৈরি করতে হবে। এই পেজটি একটি সাধারণ ডেটা রিটার্ন করবে যা JavaScript দ্বারা ফেচ করা হবে।
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<body>
<h2>এই ডেটা সার্ভার থেকে আসছে</h2>
<p>বর্তমান সময়: <%= new java.util.Date() %></p>
</body>
</html>
এই data.jsp পেজে বর্তমান সময় প্রদর্শন করা হচ্ছে, যা XMLHttpRequest এর মাধ্যমে asynchronously ফেচ করা হবে।
XMLHttpRequest এর মাধ্যমে ডেটা প্রেরণ
XMLHttpRequest শুধু GET রিকোয়েস্টের জন্য নয়, বরং POST রিকোয়েস্টের মাধ্যমেও ডেটা প্রেরণ করা সম্ভব। POST রিকোয়েস্ট ব্যবহার করার উদাহরণ:
<script>
function sendData() {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'processData.jsp', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send('name=John&age=30'); // ডেটা পাঠানো
}
</script>
এই কোডে, name এবং age নামক ডেটা processData.jsp পৃষ্ঠায় POST রিকোয়েস্টের মাধ্যমে পাঠানো হচ্ছে।
POST রিকোয়েস্টের জন্য JSP পৃষ্ঠা (processData.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
<html>
<body>
<h2>আপনার নাম: <%= name %></h2>
<h2>আপনার বয়স: <%= age %></h2>
</body>
</html>
এখানে, processData.jsp পেজটি POST রিকোয়েস্ট থেকে name এবং age প্যারামিটার গ্রহণ করছে এবং সেগুলো প্রদর্শন করছে।
XMLHttpRequest ব্যবহার করে JSP পেজের মাধ্যমে ডেটা ফেচ করা একটি শক্তিশালী পদ্ধতি যা ওয়েব পেজের পারফরম্যান্স এবং ইউজার ইন্টারফেসকে উন্নত করে। এটি অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভিটি এবং দ্রুততার জন্য অত্যন্ত কার্যকরী, কারণ পেজ রিফ্রেশ ছাড়াই ডেটা লোড এবং প্রদর্শন করা সম্ভব।
Read more
